window.onload=function(){
     // 1、给音乐列表偶数号行加样式
     // 抓元素

     var list_box = document.getElementById("list_box");
     var music_lis = document.getElementsByClassName("music_li");

     //  循环音乐列表li给偶数号加样式
     function li_style() {
         for (var i = 0; i < music_lis.length; i++) {

             if (i % 2 == 0) {
                 music_lis[i].style.background = "white"

             } else {
                 //    alert("ok")
             }
         }


     }
     setTimeout(li_style, 5000);







    // 2、vue框架应用部分
    // 实例化一个vue对象
    var app = new Vue({
        el: "#big_mask",
        data: {
            query: "陈奕迅",
            musiclists:[],
            musicUrl:"",
            coverPicUrl:"",
            hotComments:[],
            isPlaying:false,

        },
        methods: {
            // 根据输入内容请求相关歌曲列表数据
            searchMusic: function () {
                var that = this;
                axios.get("https://autumnfish.cn/search?keywords=" + this.query)
                    .then(function (response) {
                        console.log(response)
                        that.musiclists = response.data.result.songs;
                        
                    }, function (err) {}) 
            },
            // 根据具体歌曲id获得对应歌曲的url,自动播发音乐
            
            palyMusic:function(musicId){
                var that = this;
                axios.get("https://autumnfish.cn/song/url?id=" + musicId)
                    .then(function (response) {
                        console.log(response.data.data[0].url)
                        that.musicUrl = response.data.data[0].url;
                    }, function (err) {})

                // 同时根据具体歌曲id获得对应歌曲的封面等详情
                 axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
                     .then(function (response) {
                         console.log(response.data.songs[0].al.picUrl)
                         that.coverPicUrl = response.data.songs[0].al.picUrl;
                     }, function (err) {})
                // 同时根据具体歌曲id获得对应歌曲的评论等详情
                 axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
                     .then(function (response) {
                         console.log(response)
                         that.hotComments = response.data.hotComments;
                     }, function (err) {})

            },
            // 同时监听audio的play和pause方法控制动画
            play:function (){
                this.isPlaying=true;
                 
            },
            pause:function(){
                this.isPlaying=false;
            }
           
                
           
            
            
        }


    })
    app.searchMusic();
      




}